<template>
    <div class="role">
        <div class="search">
            <el-button type="primary" size="small" @click="editRef.drawer=true" >添加</el-button>
        </div>
        <el-table size="small" :data="shoeRoled" style="width: 98%">
            <el-table-column  label="序号" width="180" type="index"/>               
            <el-table-column v-if="false" prop="id" label="编号" width="100"  />
            <el-table-column prop="roleName" label="名称" width="180" />
             <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row.id)">
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
            
        </el-table>
        <el-pagination style="margin-top: 10px;" small background layout="prev, pager, next" 
        :total="roles.length" v-model:current-page="pageIndex" />
        <EditRole ref="editRef" @sync-list="loadRoles"></EditRole>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref ,computed} from "vue";
import {$delete, $roleList,$findEmployeeRole,$findRoleById,$checkIfInitialAdmin,$findPowerById} from '../../api/role.ts'
import EditRole from '../../components/user/EditRole.vue'
import {ElNotification, ElMessageBox} from 'element-plus'
//角色列表
let roles = ref([])

//页码
let pageIndex = ref(1)
//显示的列表
let shoeRoled = computed(()=>{
    return roles.value.slice((pageIndex.value-1)*10,pageIndex.value*10)
})

//加载角色列表
const loadRoles = async()=>{
    roles.value = await $roleList()
}

// 编辑方法
const handleEdit = async (id:number) =>{
    let rets = await $checkIfInitialAdmin({id})
    
    if(rets.code === 2001){
        ElNotification({
                title: '失败！',
                message: '该角色是初始管理员，无法编辑！',
                type: 'error',
        })
        return
    }

    let ret = await $findRoleById({id})
    if(ret.code === 4001){
        ElNotification({
            title: '失败！',
            message: '服务器异常，请联系管理员！',
            type: 'error',
        })
        return
    }
    console.log(ret.t);
    
    editRef.value.formData2.id = ret.t.id
    editRef.value.formData2.roleName = ret.t.roleName
    
    editRef.value.formData2.powers = ret.t.powerList.map(item => item.id)


    const roleId = ret.t.id;
    console.log(ret.t);
    
    let ret2 = await $findPowerById({roleId})
    if(ret2.code === 4001){
        ElNotification({
            title: '失败！',
            message: '服务器异常，请联系管理员！',
            type: 'error',
        })
        return
    }
    console.log(ret2.t);

    // editRef.value.formData2.id = ret.t.id
    // editRef.value.formData2.roleName = ret.t.id
    
    editRef.value.drawer2 = true

}
//删除方法
const handleDelete = async (id:number)=>{
    let ret = await $checkIfInitialAdmin({id})
    
    
    if(ret.code === 2001){
        ElNotification({
                title: '失败！',
                message: '该角色是初始管理员，无法删除！',
                type: 'error',
        })
        return
    }
    ElMessageBox.confirm(
        '确定删除么？',
        '提示',
        {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }
    )
    .then(async()=>{
        

       let ret =  await $findEmployeeRole({id})
       if(ret.code === 2001){
            ElNotification({
                title: '失败！',
                message: '当前角色下存在员工，无法删除',
                type: 'error',
            })
       }else{
            let ret =  await $delete({id})
            if(ret.code === 2001){
                ElNotification({
                    title: '成功！',
                    message: '恭喜你，删除成功！',
                    type: 'success',
                })
                //重新加载列表
                loadRoles()
            }else{
                ElNotification({
                    title: '失败！',
                    message: '删除失败，请联系管理员！',
                    type: 'error',
                })
            }
        }
        
    })
    .catch(()=>{
        
    })

}

//定义编辑组件ref对象
let editRef = ref(null)

onMounted(()=>{
    loadRoles()

})

</script>

<style lang="scss" scoped>
.search{
    margin-bottom: 5px;
}

</style>